<template>
  <SysDialog :visible.sync="show" title="Source Manager" width="800px">
    <template>
      <SysTable
        :columns="tableColumns"
        :data="tableData"
        height="350px"
        border
        selection
      ></SysTable>
    </template>
    <template #button>
      <el-button plain size="small" @click="handleAdd">New</el-button>
      <el-button plain size="small" @click="handleEdit">Edit</el-button>
      <el-button plain size="small">Delete</el-button>
      <el-button plain size="small">Connect</el-button>
      <el-button plain size="small" @click="show = false">Cancel</el-button>
    </template>
    <SourceEditDialog
      :visible.sync="dialogVisible"
      :isEdit="isEdit"
    ></SourceEditDialog>
  </SysDialog>
</template>

<script setup>
import { ref, watch, computed, onMounted, defineAsyncComponent } from "vue";
import { columns } from "./modules/columns";
const SourceEditDialog = defineAsyncComponent(() => import("./SourceEdit.vue"));
const emit = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const dialogVisible = ref(false);
const isEdit = ref(false);

const tableColumns = ref(columns);
const tableData = ref([]);

const show = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

// 打开新增编辑弹窗
const handleAdd = () => {
  isEdit.value = false;
  dialogVisible.value = true;
};

const handleEdit = () => {
  isEdit.value = true;
  dialogVisible.value = true;
};

onMounted(() => {});
</script>

<style scoped lang="scss"></style>
